import React from 'react'
import PropTypes from 'prop-types'
import { View, Text } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import LinearGradient from 'react-native-linear-gradient'
import {
  unbindCompany
} from 'src/utils/RequestAPI'
import { CommonToast } from 'src/utils/ToastUtil'
import { styles, tabLists } from '../css/AdministratorsHeader'
import { getUserAvatorLocalCByGender } from 'src/utils/ConfigUtil'
import DefaultImage from 'src/components/image/DefaultImage'

export default class AdministratorsHeader extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    companyClick: PropTypes.func,
    getApplyComeInOperatorList: PropTypes.func,
    operatorListFn: PropTypes.func,
    companyId: PropTypes.number,
    masterSearchFn: PropTypes.func,
    userId: PropTypes.number,
    comeInOperatorList: PropTypes.any,
    workmatesList: PropTypes.any,
    checkbox: PropTypes.number,
    transferMaster: PropTypes.bool,
    checkboxFn: PropTypes.func,
    onModalHide: PropTypes.func,
    userData: PropTypes.object,
    masterSearch: PropTypes.bool
  }

  constructor (props) {
    super(props)
    this.state = {
      initialPage: 0,
      checkbox: 0
    }
  }

  onClick = () => {
    const { userId, companyId, onModalHide } = this.props
    if (!this.props.masterSearch) {
      unbindCompany({ headers: { userId, companyId } }).then((data) => {
        if (data.data === true) {
          CommonToast('您已提出解绑申请成功')
          onModalHide()
        } else {
          CommonToast('解绑失败')
        }
      })
    }
  }

  render () {
    const tabList = ['我的同事', '待审核人员', '解绑成员']
    const { checkbox, checkboxFn, transferMaster, comeInOperatorList, userData: { B: { mobile, postion, userName, userAvator, gender, userId } }, workmatesList, masterSearch } = this.props
    console.log(userAvator)
    return (
      <View style={styles.View}>
        <View style={styles.administratorsHeaderBody}>
          <View style={styles.bodyView}>
            <View style={styles.administratorsItem}>
              <View style={styles.administratorsItemName}>
                <Text style={styles.administratorsItemNameLeft}>
                  {userName}
                </Text>
                <View style={styles.administratorsItemNameRightView} >
                  <Text onPress={this.onClick} style={styles.administratorsItemNameRightText}>
                    {!masterSearch ? '解绑企业' : '管理员'}
                  </Text>
                </View>
              </View>
              <View style={styles.mobilePhone}>
                <Text style={styles.position}>{postion}</Text>
                <Text style={{ width: ScaleS(1), height: ScaleS(12), backgroundColor: '#666666FF' }}></Text>
                <Text style={styles.mobile}>{mobile}</Text>
              </View>
            </View>
            <View style={styles.headPortrait}>
              <DefaultImage
                style={styles.headPortraitImg}
                source={{ uri: userAvator }}
                errorSource={getUserAvatorLocalCByGender(gender, userId)}
              />
            </View>
          </View>
        </View>
        {
          !!masterSearch && <View style={styles.tabList}>
            {
              (tabList || []).map((item, index) => {
                return <View style={tabLists.view} key={index}>
                  <CustomButton onPress={checkboxFn} params={{ type: index }}>
                    <View style={checkbox === index ? tabLists.checkboxText : {}}>
                      <Text style={checkbox === index ? tabLists.checkboxNameActive : tabLists.checkboxName}>{item}</Text>
                      {(index === 1 && (comeInOperatorList || []).length > 0) && <View style={tabLists.sizeIcon}></View>}
                    </View>
                  </CustomButton>
                  {index < (tabList.length - 1) && <View style={tabLists.tabLine}></View>}
                </View>
              })
            }
          </View>
        }
      </View >
    )
  }
}
